<style>
  .choiceP {
        margin-left: -8px;
        background: #44CEF6;
        color: #fff;
        text-align: center;
        padding: 8px;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        /* border-radius: 5px; */
    }
</style>
<template>
  <div class="newAdmin w944">
    <alert ref="alert"></alert>
    <div class="label_top">
      <button @click="back">返回</button>
      <p><i class="line"></i>{{updateTitle}}</p>
    </div>
    <div class="label_table">
      <div class="colInfo">
        <em>姓名:</em>
        <!-- <el-input type="text" placeholder="请输入管理员姓名" v-model="newAdmin" disabled class="newInput" style="width: 130px;" >
                    <template slot="append" @click="chooseEmployee">选择人员</template>
                 </el-input> -->
        <input type="text" placeholder="请输入管理员姓名" v-model="newAdmin" disabled class="newInput" style="width: 130px;">
        <a class="choiceP" @click="chooseEmployee">选择人员</a>
        </input>

      </div>
      <div class="colInfo">
        <em>管理角色:</em>
        <input type="text" placeholder="请创建管理员角色" v-model="newRole" class="newInput" />
      </div>
      <div class="colInfo">
        <em>联系方式:</em>
        <input type="text" placeholder="请输入联系方式" v-model="newTel" class="newInput" maxlength="11" />
      </div>
      <!-- <div class="colInfo">
                <em>密码:</em>
                <input type="password" placeholder="请输入密码" v-model="newPassWord" class="newInput" />
            </div> -->

      <div class="colInfo">
        <em>状态:</em>
        <el-switch v-show="stateFlag" class="switchStyle" v-model="newStatus" active-color="#44cef6" inactive-color="#999"
          active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0">
        </el-switch>
      </div>
    </div>
    <div class="accessConfig">
      <h3>权限配置</h3>
      <div v-for="(item,index) in tableData">
        <div class="childDiv clearFix">
          <div>
            <span class="firstDiv">
              <el-checkbox v-model="item.selected" @change="checkedFirst(item,index)">{{item.name}}
              </el-checkbox>
              <em v-if="item.childList.length>0" class="inblock">
                <a @click="slideDown(index)" v-show="item.slideClose" class="slideClose"><img src="../../assets/qudaoImg/slideClose.png" /></a>
                <a @click="slideUp(index)" v-show="item.slideOpen" class="slideOpen"><img src="../../assets/qudaoImg/slideOpen.png" /></a>
              </em>
            </span>
            <div class="thirdParent" v-if="item.thridChildIsNull">
              <div class="guodu">
                <span v-show="item.ulHidden" v-for="(secondItem,index2) in item.childList" v-bind:style="{display:secondItem.childList.length==0?'inline-block':'block'}"
                  class="thirdDiv">
                  <el-checkbox v-model="secondItem.selected" v-if="secondItem.name!=null" @change="checkedSecond(item,secondItem,index2)">{{secondItem.name}}
                  </el-checkbox>
                </span>
              </div>

            </div>
            <!--  v-show="item.ulHidden"  二级显示-->
            <span v-show="item.ulHidden" v-for="(secondItem,index2) in item.childList" class="secondParent erji" v-if="!item.thridChildIsNull">
              <span v-bind:style="{display:secondItem.childList.length==0?'inline-block':'block',
								borderTop:secondItem.childList.length>=0?'none':'1px solid #ccc'}"
                class="secondDiv">
                <el-checkbox v-model="secondItem.selected" v-if="secondItem.name!=null" @change="checkedSecond(item,secondItem,index2)">{{secondItem.name}}</el-checkbox>
              </span>
              <div class="thirdParent">
                <span class="guoduDouble">
                  <span class="thirdDivDouble" v-for="(threeItem,index3) in secondItem.childList" v-bind:style="{width:threeItem.childList.length>0?'100%':'auto'}">
                    <span>
                      <el-checkbox v-if="threeItem.name!=null" v-model="threeItem.selected" @change="checkedThird(item,secondItem,threeItem,index2)">
                        {{threeItem.name}}</el-checkbox>
                    </span>
                    <span class="fourthDiv" v-for="(fourItem,index) in threeItem.childList">
                      <span>
                        <el-checkbox v-model="fourItem.selected" @change="checkedFour(item,secondItem,threeItem,fourItem,index3)">
                          {{fourItem.name}}</el-checkbox>
                      </span>
                    </span>
                  </span>
                </span>
              </div>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="newAdminButton">
      <a @click="addSubmitSave">保存</a>
      <!-- <a @click="cancel" class="btnRight">取消</a> -->
    </div>

    <div class="innerLecture" v-if="innerLecture">
      <a @click="innerLectureClose" class="innerLectureClose">&#10005;</a>
      <p>选择员工</p>
      <div class="innerLectureLine">
        <el-cascader v-model="city" :options="cityArr" :props="optionProps" class="th_2" @change="cityArrChange"
          placeholder="选择地区"></el-cascader>
        <div class="msearch">
          <input placeholder="请输入关键词……" v-model="search" />
          <a @click="getInnerLecture"><img src="../../assets/qudaoImg/search.png" /></a>
        </div>
      </div>
      <div class="userContent clearFix">
        <div class="leftContent">
          <el-input placeholder="查找组织机构、部门" v-model="filterText"></el-input>
          <el-tree :data="organizationArr" :props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode"
            ref="tree" :default-expanded-keys="[dataId]" node-key="id">
          </el-tree>
        </div>
        <div class="rightContent">
          <el-table :data="dialogTableData" border highlight-current-row @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="nickname" label="姓名" width="100"></el-table-column>
            <el-table-column prop="organizationResultName" label="组织"></el-table-column>
            <el-table-column prop="stationName" label="岗位" width="150"></el-table-column>
          </el-table>
          <div class="studyPag">
            <el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize"
              layout="prev, pager, next" :total="total"></el-pagination>
          </div>
        </div>
      </div>
      <div class="footerButton">
        <a @click="innerLectureSubmit">确定</a>
        <a @click="innerLectureClose" class="cancel">取消</a>
      </div>
    </div>
  </div>


</template>

<script>
  import alert from '../../components/Alert.vue';
  export default {
    data() {
      return {
        nowType: 'add',
        updateTitle: '新增管理员',
        //				新增编辑绑定字段
        id: '',
        newAdmin: '',
        newTel: '',
        newPassWord: '',
        newRole: '',
        newRoleId: '',
        newStatus: 1,
        stateFlag: false,
        //				权限管理设置
        slideClose: true,
        slideOpen: false,
        ulHidden: false,
        tableData: [],
        checkedPowerList: [],
        state: false,
        levelList: {
          first: [],
          second: [],
          third: [],
          four: []
        },

        pagesize: 15,
        currentpage: 1,
        total: 1,
        city: [],
        cityArr: [],
        proviceid: '', //省id
        cityid: '', //市id
        regionid: '', //区id

        //以下为弹窗
        innerLecture: false,
        search: '',
        // tableData:[],
        dialogTableData: [],
        dataId: '',
        filterText: '',
        organizationArr: [],
        optionProps: {
          value: 'id',
          label: 'name',
          children: 'list'
        },
        defaultProps: {
          children: 'childrenList',
          label: 'name'
        },
        multipleSelection: [],
        multipleSelectionName: [],
        multipleSelectionPhone: [],
        multipleSelectionImageUrl: [],
        multipleSelectionSex: [],
        multipleSelectionCity: [],
        pagesize: 15,
        currentpage: 1,
        total: 1,
        newOrgId: [],
        choicePeople: [],
      }
    },
    methods: {
      getParams() {
        var routerParams = this.$route.params.type;
        if (routerParams == 'edit') {
          this.nowType = 'edit';
          this.updateTitle = "编辑管理员";
        } else {
          this.nowType = 'add';
          this.stateFlag = true;
        }
      },
      getTreeDataCity(data) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].list.length < 1) {
            data[i].list = undefined;
          } else {
            this.getTreeDataCity(data[i].list);
          }
        }
        return data;
      },
      chooseEmployee() {
        this.innerLecture = true;
      },
      cityArrChange(data) {
        console.log('cityArrChange----data:', data, this.city);
        this.proviceid = data[0];
        if (data[1] != undefined) {
          this.cityid = data[1];
        } else {
          this.cityid = '';
        };
        if (data[2] != undefined) {
          this.regionid = data[2];
        } else {
          this.regionid = '';
        };
      },

      // 组织机构结构
      getOrganizationArr() {
        this.$ajax({
          url: this.$root.jifuUrl + "/getOrganizationInfo?" + '&rootcompanyid=' + 1 + '&proviceid=' + this.proviceid +
            '&cityid=' + this.cityid + '&regionid=' + this.regionid,
          method: 'GET',
          data: {},
          success: res => {
            if (res.data.code == 200) {
              this.organizationArr = res.data.data;
              // this.organization = res.data.data;
              var s = {
                childrenList: res.data.data,
                cityName: '',
                id: '0',
                name: '所有组织机构',
                icon: ''
              }
              var arr = [];
              arr.push(s)
              // console.log('--所有机构-arr-', arr)
              this.organizationArr = arr
              for (let i = 0; i < res.data.data.length; i++) {
                this.newOrgId.push(res.data.data[i].id)
              }
            }
          }
        });
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      handleNodeClick(data) {
        this.dataId = data.id;
        this.getInnerLecture();
      },

      getInnerLecture() {
        this.$ajax({
          url: this.$root.jifuUrl + "/getUserByOrganizationId?" + 'page=' + this.currentpage + '&num=' + this.pagesize +
            '&status=1&rootcompanyid=' + 1 + '&name=' + this.search + '&organizationId=' + this.dataId +
            '&proviceid=' + this.proviceid + '&cityid=' + this.cityid + '&regionid=' + this.regionid,
          method: 'GET',
          data: {},
          success: res => {
            if (res.data.code == 200) {
              this.dialogTableData = res.data.data.list;
              this.total = res.data.data.pageParam.items;
            }
          }
        })
      },

      handleSelectionChange(val) {
        console.log('--handleSelectionChange--val--', val)
        this.choicePeople = val
        for (var i = 0; i < val.length; i++) {
          this.multipleSelection.push(val[i].id);
          this.multipleSelectionName.push(val[i].nickname);
          this.multipleSelectionPhone.push(val[i].phone);
          this.multipleSelectionImageUrl.push(val[i].headimg);
          this.multipleSelectionSex.push(val[i].sex);
          this.proviceid = val[i].proviceid;
          this.cityid = val[i].cityid;
          this.regionid = val[i].regionid;
          if (val[i].proviceid != undefined) {
            this.multipleSelectionCity.push(val[i].proviceid);
          };
          if (val[i].cityid != undefined) {
            this.multipleSelectionCity.push(val[i].cityid);
          };
          if (val[i].regionid != undefined) {
            this.multipleSelectionCity.push(val[i].regionid);
          };
        }
      },

      handleCurrentChange(value) {
        this.currentpage = value;
        this.getInnerLecture();
      },

      innerLectureSubmit() {
        console.log('选择的老师', this.multipleSelection);
        console.log('选择的老师', this.multipleSelection.length);
        if (this.choicePeople.length > 1) {
          this.failText = '只能选择一位员工';
          this.$rootFunction().deleteResFail();
        } else {
          this.newAdmin = this.choicePeople[0].nickname;
          this.newTel = this.choicePeople[0].phone;

          this.userid = this.multipleSelection.join(',');
          this.userName = this.multipleSelectionName.join(',');
          this.phone = this.multipleSelectionPhone.join(',');
          this.imageUrl = this.multipleSelectionImageUrl.join(',');
          if (this.multipleSelectionSex.join(',') == 0) {
            this.sex = 0;
          } else {
            this.sex = 1;
          };
          this.city = this.multipleSelectionCity;
          this.innerLecture = false;
        }
      },
      innerLectureClose() {
        this.innerLecture = false;
      },





      slideDown(index) {
        //				console.log("*******",index)
        this.tableData.splice(index, 1, {
          ...this.tableData[index],
          slideClose: false,
          slideOpen: true,
          ulHidden: true,
        });
        //				console.log("####",this.tableData[index].slideClose,this.tableData[index].slideOpen)
        //				console.log("tableData:",this.tableData)
      },
      slideUp(index) {
        //				console.log("%%%%%",this.tableData[index])
        this.tableData.splice(index, 1, {
          ...this.tableData[index],
          slideClose: true,
          slideOpen: false,
          ulHidden: false,
        });
        //				console.log("tableData:",this.tableData)
      },
      getKcCourseList() {
        // 初始化更新页面
        this.$ajax({
          url: this.$root.jifuUrl + "/sys/permissionAll",
          method: 'GET',
          data: {},
          success: res => {
            if (res.data.code == 200) {
              this.tableData = res.data.data;
              if (this.tableData != null && this.tableData.length > 0) {
                this.tableData.forEach(element => {
                  element.slideClose = true;
                  element.slideOpen = false;
                  element.ulHidden = false;
                  if (this.levelList.first.indexOf(element.id) >= 0) {
                    this.checkedPowerList.push(element.id);
                    element.selected = true;
                  } else {
                    element.selected = false;
                  }
                  element.childList.forEach(element2 => {
                    if (this.levelList.second.indexOf(element2.id) >= 0) {
                      this.checkedPowerList.push(element2.id);
                      element2.selected = true;
                    } else {
                      element2.selected = false;
                    }
                    if (element2.childList.length == 0) {
                      if (element.thridChildIsNull) {
                        element.thridChildIsNull = true;
                      }
                    } else {
                      element.thridChildIsNull = false;
                      element2.childList.forEach(element3 => {
                        if (this.levelList.third.indexOf(element3.id) >= 0) {
                          this.checkedPowerList.push(element3.id);
                          element3.selected = true;
                        } else {
                          element3.selected = false;
                        }
                        if (element3.childList.length > 0) {
                          element3.childList.forEach(element4 => {
                            if (this.levelList.four.indexOf(element4.id) >= 0) {
                              this.checkedPowerList.push(element4.id);
                              element4.selected = true;
                            } else {
                              element4.selected = false;
                            }
                          })
                        }
                      })
                    }
                  })
                })
              }
            }
          }
        });
      },
      checkedFirst(item, val) {
        console.log('--checkedFirst--', item, val)
        var index = this.checkedPowerList.indexOf(item.id)
        if (index < 0) {
          this.checkedPowerList.push(item.id)
        } else {
          this.checkedPowerList.splice(index, 1)
        }
        this.tableData.splice(val, 1, item);
        //console.log("@@@@",index,this.checkedPowerList)
      },
      checkedSecond(item1, item2, index2) {
        console.log('--checkedSecond-item1, item2, index2-', item1, item2, index2)
        item1.childList.splice(index2, 1, item2);
        var index = this.checkedPowerList.indexOf(item2.id)
        if (index < 0) {
          this.checkedPowerList.push(item2.id);
          if (this.checkedPowerList.indexOf(item1.id) < 0) {
            this.checkedPowerList.push(item1.id);
            if (!item1.selected) {
              item1.selected = true;
            }
          }
        } else {
          this.checkedPowerList.splice(index, 1)
          this.isNotSelectedAll(item1)
        }
        //console.log("@@@@",index,this.checkedPowerList)
      },
      checkedThird(item1, item2, item3, index2) {
        console.log('--checkedThird-item1, item2, index2-', item1, item2, item3, index2)
        var index = this.checkedPowerList.indexOf(item3.id)
        if (index < 0) {
          this.checkedPowerList.push(item3.id)
          if (this.checkedPowerList.indexOf(item1.id) < 0) {
            this.checkedPowerList.push(item1.id)
            if (!item1.selected) {
              item1.selected = true;
            }
          }
          if (this.checkedPowerList.indexOf(item2.id) < 0) {
            this.checkedPowerList.push(item2.id)
            if (!item2.selected) {
              item2.selected = true;
            }
          }
        } else {
          this.checkedPowerList.splice(index, 1)
          this.isNotSelectedAll(item2);
          this.isNotSelectedAll(item1)
        }
        item1.childList.splice(index2, 1, item2);
        //console.log("@@@@",index,item2,this.checkedPowerList)
      },
      checkedFour(item1, item2, item3, item4, index3) {
        console.log('--checkedFour item2, index2-', item1, item2, item3, item4, index3)
        var index = this.checkedPowerList.indexOf(item4.id)
        if (index < 0) {
          this.checkedPowerList.push(item4.id)
          if (this.checkedPowerList.indexOf(item1.id) < 0) {
            this.checkedPowerList.push(item1.id)
            if (!item1.selected) {
              item1.selected = true;
            }
          }
          if (this.checkedPowerList.indexOf(item2.id) < 0) {
            this.checkedPowerList.push(item2.id)
            if (!item2.selected) {
              item2.selected = true;
            }
          }
          if (this.checkedPowerList.indexOf(item3.id) < 0) {
            this.checkedPowerList.push(item3.id)
            if (!item3.selected) {
              item3.selected = true;
            }
          }
        } else {
          this.checkedPowerList.splice(index, 1)
          this.isNotSelectedAll(item3);
          this.isNotSelectedAll(item2);
          this.isNotSelectedAll(item1)
        }
        item2.childList.splice(index3, 1, item3);
        //				console.log("@@@@",index,item3,this.checkedPowerList)
      },

      isNotSelectedAll(item) { //判断子级是否全部没有选中
        var s = -1;
        item.childList.forEach(element => {
          var i = this.checkedPowerList.indexOf(element.id)
          if (i > s) {
            s = i
          }
        });
        if (s == -1) { //二级一个都没有选中
          item.selected = false;
          var s1 = this.checkedPowerList.indexOf(item.id)
          this.checkedPowerList.splice(s1, 1);
        }

      },
      addUser() {
        let that = this;
        var pePermissionVoList = [];
        this.checkedPowerList.forEach(element => {
          pePermissionVoList.push({
            "id": element
          })
        });
        let addUserDetail = {
          userId: this.choicePeople[0].id,
          personPhone: that.newTel,
          status: that.newStatus,
          rootcompanyid: '1',
          peRoleVo: {
            'name': that.newRole
          },
          pePermissionVoList: pePermissionVoList,
        };
        console.log('---this.choicePeople----', this.choicePeople)
        console.log('---this.choicePeople[0].id----', this.choicePeople[0].id)
        this.$ajax({
          url: this.$root.jifuUrl + "/mns/user/addAdminUser",
          headers: {
            'ContentType': 'application/json; charset=utf-8'
          },
          method: 'POST',
          data: addUserDetail,
          success: res => {
            if (res.data.code == 200) {
              this.$refs.alert.show({
                alertText: '保存成功',
                alertSubmit: function() {
                  alertStatus: 0
                }
              });
              setTimeout(() => {
                this.$router.push({
                  name: 'set'
                });
              }, 2000)
            } else {
              this.failText = res.data.message;
              this.$rootFunction().deleteResFail();
            }
          }
        });
      },
      updateUser() {
        let that = this;
        var pePermissionVoList = [];
        this.checkedPowerList.forEach(element => {
          pePermissionVoList.push({
            "id": element
          })
        });
        let updateUserDetail = {
          peRoleVo: {
            'id': that.newRoleId,
            'name': that.newRole
          },
          pePermissionVoList: pePermissionVoList
        };
        if (that.newPassWord == '******') {
          this.$ajax({
            url: this.$root.jifuUrl + "/updateBackUser?" + 'nickname=' + that.newAdmin + '&phone=' + that.newTel +
              '&status=' + that.newStatus + '&id=' + that.id + '&rootcompanyid=1',
            headers: {
              'ContentType': 'application/json; charset=utf-8'
            },
            method: 'POST',
            data: updateUserDetail,
            success: res => {
              if (res.data.code == 200) {
                this.$refs.alert.show({
                  alertText: '保存成功',
                  alertSubmit: function() {
                    alertStatus: 0
                  }
                });
                setTimeout(() => {
                  this.$router.push({
                    name: 'set'
                  });
                }, 2000)
              } else {
                this.failText = res.data.message;
                this.$rootFunction().deleteResFail();
              }
            }
          });
        } else {
          this.$ajax({
            url: this.$root.jifuUrl + "/updateBackUser?" + 'nickname=' + that.newAdmin + '&phone=' + that.newTel +
              '&password=' + that.newPassWord + '&status=' + that.newStatus + '&id=' + that.id + '&rootcompanyid=1',
            headers: {
              'ContentType': 'application/json; charset=utf-8'
            },
            method: 'POST',
            data: updateUserDetail,
            success: res => {
              if (res.data.code == 200) {
                this.$refs.alert.show({
                  alertText: '保存成功',
                  alertSubmit: function() {
                    alertStatus: 0
                  }
                });
                setTimeout(() => {
                  this.$router.push({
                    name: 'set'
                  });
                }, 2000)
              } else {
                this.failText = res.data.message;
                this.$rootFunction().deleteResFail();
              }
            }
          });
        }
      },
      addSubmitSave() {
        let that = this;
        if (that.nowType == 'add') {
          that.addUser();
        } else if (that.nowType == 'edit') {
          that.updateUser();
        }
      },
      cancel() {
        this.$router.push({
          name: 'set'
        })
      },
      back() {
        this.$router.go(-1);
      }
    },
    components: {
      alert
    },
    mounted: function() {
      this.getParams();
      this.$rootFunction().getAllCity();
      this.getKcCourseList();
      this.getOrganizationArr();
      this.getInnerLecture();
      if (this.nowType == "edit") {
        console.log('306', this.nowType, this.$root.adminMsg)
        this.id = this.$root.adminMsg.id;
        this.newAdmin = this.$root.adminMsg.nickname;
        this.newTel = this.$root.adminMsg.phone;
        this.newPassWord = '******';
        this.stateFlag = true;
        this.newStatus = this.$root.adminMsg.status;
        this.newRole = this.$root.adminMsg.peRoleByCheckboxVoList[0].name;
        this.newRoleId = this.$root.adminMsg.peRoleByCheckboxVoList[0].id;
        this.$root.adminMsg.pePermissionByCheckboxVoList.forEach(element => {
          if (element.level == 1) {
            this.levelList.first.push(element.id)
          } else if (element.level == 2) {
            this.levelList.second.push(element.id)
          } else if (element.level == 3) {
            // console.log(element.name,element.level);
            this.levelList.third.push(element.id)
          } else if (element.level == 4) {
            //						console.log(element.name,element.level);
            this.levelList.four.push(element.id)
          }
        })
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    }
  }
</script>

<style>
  /* 弹框的渲染 */

  .innerLecture {
    width: 60%;
    height: auto;
    background: #fff;
    border: 1px solid #ccc;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -375px;
    z-index: 999;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    font-size: 14px;
  }

  .innerLecture .footerButton a {
    margin-top: 25px;
    margin-left: 220px;
  }

  .innerLecture .innerLectureClose {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }

  .innerLectureLine {
    margin: 10px 0 20px;
    overflow: hidden;
    position: relative;
  }

  .innerLectureLine .el-cascader {
    position: absolute;
    top: -4px;
    right: 225px
  }

  .innerLectureLine .el-select,
  .innerLectureLine .el-input,
  .innerLectureLine input {
    height: 33px;
    line-height: 33px
  }

  .innerLectureLine .el-input__icon {
    line-height: 34px
  }

  .innerLectureLine .msearch {
    float: right;
    position: relative;
  }

  .innerLectureLine .msearch input {
    width: 200px;
    height: 33px;
    line-height: 33px;
    padding-left: 10px;
    border: 1px solid #DCDFE6;
    border-radius: 3px;
    font-size: 12px;
    color: #666;
    box-sizing: border-box;
  }

  .innerLectureLine .msearch a {
    height: 33px;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0
  }

  .innerLecture .studyPag {
    margin-top: 15px;
    text-align: right;
  }

  .innerLecture .el-table .cell {
    font-size: 12px;
    color: #000
  }

  .innerLecture .el-tree-node__label {
    font-size: 12px;
    color: #333;
  }

  .innerLecture .leftContent {
    width: 23%;
    float: left;
    border: 1px solid #EBEEF5;
    height: 307px;
    overflow-x: hidden
  }

  .innerLecture .leftContent .el-input {
    width: 90%;
    display: block;
    margin: 10px auto
  }

  .innerLecture .leftContent .el-tree__empty-block {
    min-height: 40px;
  }

  .innerLecture .leftContent .el-tree__empty-block .el-tree__empty-text {
    font-size: 14px;
  }

  .innerLecture .rightContent {
    width: 75%;
    float: right;
    height: 307px;
    overflow-x: hidden;
  }
</style>

<style>
  .newAdmin {
    padding-bottom: 100px;
  }

  .newAdmin .label_table {
    width: 680px;
  }

  .newAdmin .colInfo {
    width: 300px;
    display: inline-block;
    margin-bottom: 20px;
  }

  .newAdmin .colInfo em {
    width: 90px;
    text-align: right;
    color: #333;
    height: 34px;
    line-height: 34px;
    font-style: normal;
  }

  .newAdmin .colInfo .newInput {
    width: 185px;
    height: 34px;
    line-height: 34px;
    display: inline-block;
    font-size: 14px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 15px;
  }

  .newAdmin .newAdminButton {
    margin: 100px 0 0 207px;
  }

  .newAdmin .newAdminButton a {
    width: 100px;
    height: 33px;
    line-height: 33px;
    background: #44CEF6;
    display: inline-block;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
  }

  .newAdmin .newAdminButton .btnRight {
    background: #ccc;
    margin-left: 162px;
  }

  .newAdmin .switchStyle span.el-switch__label--right {
    left: -6px;
  }

  .newAdmin .switchStyle span.el-switch__label--left {
    left: 20px;
  }

  .accessConfig {
    width: 80%;
    overflow: hidden;
  }

  .accessConfig h3 {
    font-size: 16px;
    color: #000;
    font-weight: normal;
    margin: 50px 0 20px;
  }

  .accessConfig p {
    font-size: 16px;
    color: #333;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #ccc;
  }

  .accessConfig p em {
    display: block;
    float: right;
    cursor: pointer;
    margin-right: 20px;
  }

  .accessConfig ul {
    width: 100%;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #ccc;
    padding-left: 73px;
    box-sizing: border-box;
  }

  .accessConfig li {
    padding: 0 10px;
    float: left;
    color: #333;
  }

  .accessConfig .colDiv:last-child {
    border-bottom: 1px solid #ccc;
  }

  .accessConfig .colDiv p span {
    margin-left: 30px;
  }

  .el-checkbox .el-checkbox__input {
    margin-left: 0 !important;
    width: 15px !important;
  }

  .accessConfig .colDiv input {
    display: inline-block;
    margin-right: 5px;
    position: relative;
    top: 1px;
  }

  .accessConfig .colDiv .childLine {
    line-height: 40px;
    border-top: 1px solid #ccc;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
  }

  .accessConfig .colDiv .childLine div {
    margin-right: 10px;
  }

  .accessConfig .colDiv .childLine div input {
    margin-right: 0 !important;
  }

  .accessConfig .obstacles {
    width: 80px;
    height: 1px;
    display: inline-block;
  }

  .accessConfig .colDiv .childLine .secondMarRight input {
    margin-right: 5px !important;
  }

  /* .accessConfig .colDiv .childLine .secondMarRight:nth-child(1){padding-left: 80px;} */

  .inblock {
    display: inline-block !important;
  }

  /*.threeColor{color: #606266!important;}*/

  .newAdmin .el-checkbox {
    color: #333 !important
  }

  .firstDiv {
    width: 100%;
    border-bottom: 1px solid #ccc;
    display: block;
  }

  .firstDiv em {
    display: block;
    float: right;
    cursor: pointer;
    margin-right: 20px;
  }

  .newAdmin .secondDiv {
    width: 100%;
    border-bottom: 1px solid #ccc;
    display: block;
    box-sizing: border-box;
    padding-left: 15px;
  }

  /*.newAdmin .erji{width: auto;float: left;}*/
  /*.newAdmin .erji .secondDiv{width: auto;float: left;}*/

  .fourthDiv {
    padding-right: 10px;
  }

  .childDiv span {
    line-height: 40px;
    color: #666;
    font-size: 14px;
  }

  .thirdParent {
    width: 100%;
    overflow: hidden;
    padding-left: 30px;
    box-sizing: border-box;
  }

  .thirdDiv {
    height: 40px;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    padding-right: 10px;
    float: left;
  }

  .thirdDiv:last-child {
    overflow: hidden;
    padding-right: 0;
  }

  .thirdDiv:last-child span {
    box-sizing: border-box;
    width: 100%;
  }

  .thirdDiv span {
    width: 100%;
  }

  .thirdDiv .el-checkbox {
    padding-right: 5px;
  }

  .thirdDiv .el-checkbox .el-checkbox__label,
  .newAdmin .secondDiv .el-checkbox__label {
    padding-left: 4px;
  }

  .guodu {
    display: flex;
  }

  .thirdDiv:last-child {
    flex: 1;
  }

  .thirdDivDouble {
    height: 40px;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    padding-right: 10px;
    float: left;
  }

  .thirdDivDouble:last-child {
    overflow: hidden;
    padding-right: 0;
  }

  .thirdDivDouble:last-child span {
    box-sizing: border-box;
    width: 100%;
  }

  .thirdDivDouble span {
    width: 100%;
  }

  .thirdDivDouble .el-checkbox {
    padding-right: 5px;
  }

  .thirdDivDouble .el-checkbox .el-checkbox__label,
  .newAdmin .secondDiv .el-checkbox__label {
    padding-left: 4px;
  }

  .guoduDouble {
    display: flex;
    flex-wrap: wrap
  }

  .thirdDivDouble:last-child {
    flex: 1;
  }
</style>
